<script setup lang="js">
import { ref,onMounted } from 'vue'
import {Tickets} from "@element-plus/icons-vue";
import {fetchListAllCate,createResourceCate,updateResourceCate,deleteResourceCate} from "@/api/resourceCategory.js";
import {ElMessage, ElMessageBox} from "element-plus";


const formatDate = (date) => {
  // 检查是否为 Date 对象
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
const resourceCategoryList = ref([])

onMounted(() => {
  getResourceCategoryList()
})

const getResourceCategoryList = () => {
  fetchListAllCate().then((res) => {
    resourceCategoryList.value = res.data.data;
  })
}

const handleAdd = () => {
  isEdit.value = false
  dialogVisible.value = true
  dialogTitle.value = '添加资源分类:'
  resourceCategory.value = {
    name: '',
    sort: 0,
  }
}

const handleUpdate = (row) => {
  isEdit.value = true
  dialogVisible.value = true
  dialogTitle.value = '编辑资源分类:'
  resourceCategory.value = {
    id: row.id,
    name: row.name,
    sort: row.sort,
  }
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteResourceCate(row.id).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('删除成功');
      getResourceCategoryList();
    })
  }).catch(() => {
    ElMessage.info('取消删除');
  })
}

const isEdit = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const resourceCategory = ref({
  name: '',
  sort: 0,
})
const resourceCategoryForm = ref('')
const handleSave = () => {
  if (isEdit.value) {
    updateResourceCate(resourceCategory.value.id, resourceCategory.value).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('修改成功');
      dialogVisible.value = false
      getResourceCategoryList();
    })
  } else {
    createResourceCate(resourceCategory.value).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('添加成功');
      dialogVisible.value = false
      getResourceCategoryList();
    })
  }
}

const handleClose = () => {
  dialogVisible.value = false
  resourceCategory.value = {}
}

</script>

<template>
  <div class="resource-category">
    <!--添加数据-->
    <div class="add-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="add-btn">
        <el-button type="primary" plain icon="plus" @click="handleAdd()">添加</el-button>
      </div>
    </div>

    <!--数据列表-->
    <div class="data-list">
      <el-table ref="resourceCategoryTable"
                :data="resourceCategoryList"
                style="width: 100%;" border>
        <el-table-column label="编号" width="100" align="center">
          <template #default={row}>{{row.id}}</template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template #default={row}>{{row.name}}</template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template #default={row}>{{ formatDate(row.createTime)}}</template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template #default={row}>{{row.sort}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default={row}>
            <el-button size="small"
                       type="primary"
                       plain
                       icon="edit"
                       @click="handleUpdate(row)">编辑
            </el-button>
            <el-button size="small"
                       type="danger"
                       plain
                       icon="delete"
                       @click="handleDelete(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>


  <!-- 弹窗页面-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">
    <el-form :model="resourceCategory"
             ref="resourceCategoryForm"
             label-width="80px"
             size="small">
      <el-form-item label="名称：">
        <el-input v-model="resourceCategory.name" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="resourceCategory.sort" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

.resource-category {
  margin-top: 20px;
  display: flex;
  flex-direction: column;


  .add-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }
}
</style>